<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom api</title>
</head>
<body>
    
    <!-- 一、DOM API -->
    <!-- 1.使用querySelector() -->
    <div class="box"></div>
    <div id="id"></div>
    <h3>
        <span>
            <button>i am a button</button>
        </span>
    </h3>
    <script>
        // querySelector里的参数是选择器
        let element1 = document.querySelector('#id');
        let element2 = document.querySelector('.box');
        console.log("1.使用querySelector():");
        
        // log直接打印选中元素
        console.log(element1);
        // dir打印element对象
        console.dir(element2);
    </script>

    <!-- 2.点击弹出窗口 -->
    <div class="box2">鸡你太美</div>
    <script>
        let div = document.querySelector('.box2');
        div.onclick = function(){
            console.log("2.点击弹出窗口:");
            // 要点1.弹出窗口alert
            alert('哎呦，你干嘛！');

            // 要点2.打印div的内容:使用innerHTNL
            console.log(div.innerHTML);
        }
    </script>
    <hr>

    <!-- 3.点击切换图片:使用js在单击方法中，修改img.src -->
    <img src="./image/mn1.jpg" alt="">
    <script>        
        let img = document.querySelector('img');
        // console.log(img);
        img.onclick = function(){
            console.dir("3.点击切换图片:");
            console.log("修改前"+img.src);
            img.src = "./image/女.jpg";
            console.log("修改后"+img.src);

        }
    </script>
</body>
</html>